<template>
    <div class="attr-list">
        <CommonAttr></CommonAttr>
        <el-form>
            <el-form-item label="标题">
                <el-input v-model="curComponent.propValue.title" type="textarea" :rows="3" />
            </el-form-item>
            <el-form-item label="圆角">
                <el-input v-model="curComponent.propValue.border" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="背景颜色">
                <el-color-picker v-model="curComponent.propValue.color" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item label="标题颜色(点击空白实时效果)">
                <el-color-picker v-model="curComponent.propValue.titleColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="用户信息">
                <el-select v-model="curComponent.propValue.userList" filterable placeholder="请选择">
                    <el-option v-for="(item, index) in userList" :key="index" :label="item.nickName"
                        :value="item.userId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态字体大小">
                <el-input-number v-model="curComponent.propValue.statuSize" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="名字字体大小">
                <el-input-number v-model="curComponent.propValue.nameSize" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="简介字体大小" v-if="curComponent.propValue.isMuchMan == 0">
                <el-input-number v-model="curComponent.propValue.remarkSize" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="名字字体颜色">
                <el-color-picker v-model="curComponent.propValue.nameColor" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item label="状态字体颜色">
                <el-color-picker v-model="curComponent.propValue.statuColor" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item label="简介字体颜色" v-if="curComponent.propValue.isMuchMan == 0">
                <el-color-picker v-model="curComponent.propValue.remarkColor" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <!-- <el-form-item label="简介字体颜色">
                <el-color-picker v-model="curComponent.propValue.remarkColor"></el-color-picker>
            </el-form-item> -->
            <el-form-item label="人照宽">
                <el-input-number v-model="curComponent.propValue.avatarWidth" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="人照高">
                <el-input-number v-model="curComponent.propValue.avatarHeight" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="状态宽">
                <el-input-number v-model="curComponent.propValue.statusWidth" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="状态高">
                <el-input-number v-model="curComponent.propValue.statusHeight" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="状态背景">
                <el-upload class="avatar-uploader" :show-file-list="false"
                    :action="url" :headers="header" :on-success="handleAvatarSuccess">
                    <img v-if="curComponent.propValue.backgroundImage" :src="curComponent.propValue.backgroundImage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import CommonAttr from '../common/CommonAttr.vue'
import { listUser } from "@/api/system/user";
import { getToken } from '@/utils/auth';
export default {
    components: { CommonAttr },
    computed: {
        curComponent() {
            return this.$store.state.curComponent
        },
    },
    data() {
        return {
            url: process.env.VUE_APP_BASE_API + '/iot/upload',
            header: {
                Authorization: 'Bearer ' + getToken(),
                clientid: process.env.VUE_APP_CLIENT_ID
            },
            userList: [],
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577'
            ]
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        /** 查询用户列表 */
        getList() {
            listUser({
                pageNum: 1,
                pageSize: 999,
                nickName: undefined
            }).then(response => {
                this.userList = response.rows;
            })
        },
        handleAvatarSuccess(res, file) {
            this.curComponent.propValue.backgroundImage = res.data.url
        }
    }
}
</script>
<style>
.title {
        text-align: center;
        margin-bottom: 10px;
        height: 40px;
        line-height: 40px;
        border-bottom: 2px solid #e4e7ed;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>
